<script setup>
import { getMachineOEESubV2, getMachineOEEworkdescV2 } from "@/api/machine";
import { fontSize } from "@/utils/globalMethod.js";

import moment from "moment";

const option = ref({});
const loadData = async () => {
  const { data } = await getMachineOEESubV2({
    date: [moment().format("YYYYMMDD"), moment().format("YYYYMMDD")],
  });
  const { data: _data } = await getMachineOEEworkdescV2({
    date: [moment().format("YYYYMMDD"), moment().format("YYYYMMDD")],
  });
  const x = [];
  const y = [];
  const _y = [];
  data.map((item) => {
    x.push(moment(item.kgrq).format(`M月D日`));
    y.push(Number(item.tzsc).toFixed(2));
    _y.push(Number(item.gzsc).toFixed(2));
  });

  /* 1、获取设备的运作时间之和 */
  const navHour = _y.reduce((acc, pre) => {
    acc += +pre;
    return acc;
  }, 0);

  // 累计停止时间
  const _navHour = y.reduce((acc, pre) => {
    acc += +pre;
    return acc;
  }, 0);

  /* 2、指定时间内设备运作的理论小时数  公式：设备数量 * 24 * 天数 */
  const subHour = navHour + _navHour;

  /* 可动率：所有机台的小时总数  / 所有机台的运行总数 */

  /* 良品率：良品数量  /  产品总数   */

  // 累计良品数量
  const goodqty = _data.reduce((acc, pre) => {
    acc += pre.goodqty;
    return acc;
  }, 0);

  // 累计加工总数
  const sum = _data.reduce((acc, pre) => {
    acc += pre.badqty + pre.goodqty;
    return acc;
  }, 0);

  // 实际工时
  const RealTime = _data.reduce((acc, pre) => {
    acc += pre.RealTime;
    return acc;
  }, 0);

  // 标准工时
  const StdTime = _data.reduce((acc, pre) => {
    acc += pre.StdTime;
    return acc;
  }, 0);

  // 净开动率
  const jingkaidonglv = sum / navHour;

  // 速度开工率
  const sudukaidonglv = StdTime / RealTime;

  // 开动率运行效率
  let yunxingxiaolv = 0;
  if (Number(jingkaidonglv) * Number(sudukaidonglv) > 100) {
    yunxingxiaolv = 100;
  } else {
    yunxingxiaolv = (Number(jingkaidonglv) * Number(sudukaidonglv)).toFixed(2);
  }
  console.log((Number(jingkaidonglv), Number(sudukaidonglv)));

  // OEE
  let oeexl = 0;
  if (
    (Number(navHour) / Number(subHour)) *
      Number(yunxingxiaolv) *
      (Number(goodqty) / Number(sum)) >
    100
  ) {
    oeexl = 100;
  } else {
    oeexl =
      (Number(navHour) / Number(subHour)) *
      Number(yunxingxiaolv) *
      (Number(goodqty) / Number(sum));
  }
  //可动率
  let kdlxl = 0;
  if ((Number(navHour) / Number(subHour)) * 100 > 100) {
    kdlxl = 100;
  } else {
    kdlxl = (Number(navHour) / Number(subHour)) * 100;
  }
  var demoData = [
    {
      name: "OEE",
      value: isNaN(oeexl) ? "100" : oeexl.toFixed(2),
      pos: ["20%", "40%"],
      range: [0, 100],
    },
    {
      name: "可动率",
      value: isNaN(kdlxl) ? "100" : kdlxl.toFixed(2),
      pos: ["70%", "40%"],
      range: [0, 100],
    },
  ];

  var highlight = "#62b6fc";

  option.value = {
    series: (function () {
      var result = [];

      demoData.forEach(function (item) {
        result.push(
          // 外围刻度
          {
            type: "gauge",
            center: item.pos,
            radius: "60%",
            splitNumber: item.splitNum || 10,
            min: item.range[0],
            max: item.range[1],
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, highlight]],
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: highlight,
                width: 1,
              },
              length: -5,
              splitNumber: 10,
            },
            splitLine: {
              show: true,
              length: -14,
              lineStyle: {
                color: highlight,
              },
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: highlight,
              fontSize: fontSize(0.12),
              fontWeight: "bold",
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: 0,
            },
          },

          // 内侧指针、数值显示
          {
            name: item.name,
            type: "gauge",
            center: item.pos,
            radius: "50%",
            startAngle: 2125,
            endAngle: -45,
            min: item.range[0],
            max: item.range[1],
            axisLine: {
              show: true,
              lineStyle: {
                width: 20,
                color: [[1, "rgba(255,255,255,.1)"]],
              },
            },
            axisTick: {
              show: 0,
            },
            splitLine: {
              show: 0,
            },
            axisLabel: {
              show: 0,
            },
            pointer: {
              show: true,
              length: "105%",
            },
            detail: {
              show: true,
              offsetCenter: [0, "100%"],
              fontSize: fontSize(0.12),
              color: highlight,
              formatter: function (params) {
                return `${item.name}: ${params}% `;
              },
              rich: {
                name: {
                  fontSize: fontSize(0.12),
                  lineHeight: 30,
                  color: highlight,
                },
              },
            },
            itemStyle: {
              color: highlight,
            },
            data: [
              {
                value: item.value,
              },
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: fontSize(0.12),
              color: highlight,
            },
          }
        );
      });

      return result;
    })(),
  };
};

onMounted(loadData);
</script>

<template>
  <div class="ps_w_h_100">
    <div class="board-title" style="font-weight: 500; color: #fff">设备OEE</div>
    <ps-chart2 :option="option" />
  </div>
</template>

<style scoped lang="scss"></style>
